<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./lib/layui/css/layui.css">
    <!-- <link rel="stylesheet" href="./css/font.css"> -->
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/user.css">
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    <style>
        .layui-form-onswitch {
            background: rgb(27, 132, 252) !important;
            border-color: rgb(0, 110, 255);
        }
        
        tr {
            text-align: center;
        }
        
        td {
            font-weight: 500 !important;
        }
        
        .el-tag--success,
        .el-tag--paimary {
            text-align: center;
        }
        
        .el-tag--success span {
            display: inline-block;
            height: 26px;
            width: 26px;
            background-color: #f0f9eb;
            border-color: #e1f3d8;
            color: #67c23a;
        }
        
        .el-tag--paimary span {
            display: inline-block;
            height: 26px;
            width: 26px;
            background-color: #ecf5ff;
            border-color: #d9ecff;
            color: #409EFF;
        }
        
        th {
            font-weight: 700 !important;
            font-size: 14px !important;
            text-align: center !important;
        }
        
        .layui-icon-ok {
            display: inline-block;
            /* height: 20px;
            width: 20px; */
            border: 1px solid red;
            border-radius: 50%;
            color: red !important;
            font-size: 20px !important;
            display: none;
            margin-left: 10px;
        }
    </style>
</head>

<body>

    <div class="x-nav">
        <span class="layui-breadcrumb">
      <a href="">首页</a>
      <a href="">演示</a>
      <a>
        <cite>导航元素</cite></a>
    </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
    </div>

    <!-- <input type="file" id="test"> -->
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <form class="layui-form" id='form-search'>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" id="search" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="mobile" id="mobile" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <select name="sex" id="sex">
              <option value=""></option>
              <option value="0">女</option>
              <option value="1">男</option>

            </select>
                    </div>
                </div>
                <div class="layui-form-item layui-inline" id="btn2">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo" id="user-search">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-primary" id="user-reset">重置</button>
                    </div>
                </div>
            </form>
            <div class="layui-form-item layui-inline">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-primary layui-border-blue" id="add-btn">+ 新增</button>
                    <button class="layui-btn layui-btn-primary layui-border-orange">
            <i class="layui-icon layui-icon-download-circle"></i>导出</button>
                </div>
            </div>

            <table class="layui-table ">
                <colgroup>
                    <col name="el-table_1_column_1 " width="48 ">
                    <col name="el-table_1_column_2 " width="170 ">
                    <col name="el-table_1_column_3 " width="170 ">
                    <col name="el-table_1_column_4 " width="170 ">
                    <col name="el-table_1_column_5 " width="170 ">
                    <col name="el-table_1_column_6 " width="170 ">
                    <col name="el-table_1_column_7 " width="170 ">
                    <col name="el-table_1_column_8 " width="170 ">
                    <col name="gutter " width="0 ">
                </colgroup>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>用户ID</th>
                        <th>用户名</th>
                        <th>手机号</th>
                        <th>用户头像</th>
                        <th>性别</th>
                        <th>出生年月</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <!-- fenye quxu  -->
            <div id="fenye"></div>


        </div>
    </div>
</body>
<!-- 表格列表数据的模板 -->
<script type="text/html " id="tpl-table">
    {{each data}}
    <tr>
        <td>{{$index+1}}</td>
        <td>{{$value.id}}</td>
        <td>{{$value.username}}</td>
        <td>{{$value.mobile}}</td>
        <td>
            <img src="{{'http://192.168.21.69:8060/' + $value.icon}}" alt="">
        </td>
        {{if $value.sex==1 }}
        <td class="el-tag--paimary"><span>男</span></td>
        {{else}}
        <td class="el-tag--success"><span>女</span></td>
        {{/if }}
        <td>{{$value.birthday}}</td>
        <td>
            <button type="button" class="layui-btn layui-btn-xs btn-edit layui-btn-radius" data-id="{{$value.id}}">编辑</button>
            <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete layui-btn-radius" data-id="{{$value.id}}">删除</button>
        </td>
    </tr>
    {{/each}}
</script>
<!-- 修改用户数据的模板 -->
<script type="text/html" id="dialog-edit">
    <form class="layui-form" id="form-edit" enctype="multipart/form-data" lay-filter="form-edit">
        <!-- 隐藏域，保存 Id 的值 -->
        <input type="hidden" name="id">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input id="name1" type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input id="mobilephone1" type="text" name="mobile" required lay-verify="required" placeholder="请输入手机号 " autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input id="pwd1" type="text" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">性别</label>
            <span>女</span>
            <input id="sex1" type="checkbox" name="sex" lay-skin="switch">
            <span> 男</span>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户头像</label>
            <input type="file" id="coverFile" name="icon">
            <button id="update-btn" class="layui-btn layui-btn-normal">点击上传</button>
            <span class="img_success"><i class="layui-icon layui-icon-ok"></i></span>
        </div>
        <div class="layui-form-item">
            <img src="" id="image" width="180px" style="margin-left: 108px;">
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" id='two_btn'>
                <button class="layui-btn layui-btn-primary">取消</button>
                <button lay-submit class="layui-btn layui-btn-normal">确定</button>
            </div>
        </div>
    </form>
</script>
<!-- 新增用户数据的模板 -->
<script type="text/html" id="dialog-add">
    <form class="layui-form" id="form-add" lay-filter="form-add">
        <!-- 隐藏域，保存 Id 的值 -->
        <input type="hidden" name="id">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input id="name" type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input id="mobilephone" type="text" name="mobile" required lay-verify="required" placeholder="请输入手机号 " autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input id="pwd" type="text" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">性别</label>
            <span>女</span>
            <input type="checkbox" name="sex" lay-skin="switch">
            <span> 男</span>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户头像</label>
            <input type="file" id="change" name="icon" style="display: none;">
            <button id="update-btn2" class="layui-btn layui-btn-normal">点击上传</button>
            <span class="img_success"><i class="layui-icon layui-icon-ok"></i></span>
        </div>
        <div class="layui-form-item">
            <img src="" id="image" width="180px" style="margin-left: 108px;">
        </div>
        <div class="layui-form-item ">
            <div class="layui-input-block" id='two_btn'>
                <button class="layui-btn layui-btn-primary" lay-submit lay-filter="formDemo">取消</button>
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">确定</button>
            </div>
        </div>
    </form>
</script>
</script>
<script src="./lib/template-web.js"></script>
<script src="./lib/layui/layui.all.js "></script>
<script src="./js/jquery.min.js "></script>
<script src="./js/baseAPI.js "></script>
<script src="./js/user.js "></script>

</html>